<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Declarative Rendering</title>
        <script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
        <style>
            @media screen and (min-width: 960px) {
                body {
                    width: 960px;
                    margin: 0 auto;
                }
            }

            h6 {
                margin: 8px 0 0;
                padding-top: 3px;
                border-top: 2px solid #1a5ae4;
            }

            h6::after {
                content: ':';
            }

            code {
                font-family: 'Roboto Mono', Monaco, courier, monospace;
                color: #e96900;
                padding: 3px 5px;
                margin: 0 2px;
                border-radius: 2px;
                white-space: nowrap;
                font-size: 0.8em;
                background-color: #f8f8f8;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h6>文本</h6>
            <span>Message: {{ msg }}</span>
            <h6>HTML 内容</h6>
            <div v-html="htmlContent"></div>
            <h6>属性</h6>
            <span v-bind:custom-prop="myProp">可以通过控制台查看 HTML 中当前 Tag 的属性</span>
            <h6>JavaScript 表达式</h6>
            6 * 5 = {{ 6 * 5 }}<br>
            1 === '1': {{ 1==='1' ? 'true' : 'false' }}<br>
            msg.split('').reverse().join(''): {{ msg.split('').reverse().join('') }}<br>
            'string-' + myProp: <span v-text="'string-' + myProp"></span>
            <h6>Filters</h6>
            使用 filter 过滤出 {{arr}} 中大于 5 的: <span>{{arr | myFilter}}</span><br>
            字符串"{{str}}"同时使用多个 filter: {{str | removeA | upperCase}}<br>
            传参给 filter: {{str | repeat(3, '$$')}}
            <h6>内置指令</h6>
            <ol>
                <li>
                    前缀: 内置的指令是以 <code>v-</code> 作为前缀的, 其后以一个简单的表达式赋值. 如: <code>v-if="isAuth"</code> 或 <code>v-if="1==1"</code>
                </li>
                <li>
                    参数: 有的指令会带一个参数, 如 <code>v-bind:href="url"</code> 中 <code>href</code> 就是<b>参数</b>. 其他的还有 <code>v-on</code> 等指令
                </li>
                <li>
                    修饰符: <code>&lt;form v-on:submit.prevent="onSubmit"&gt;&lt;/form&gt;</code> 表示阻止默认行为, 相当于在 <code>onSubmit</code> 方法中添加了 <code>e.preventDefault();</code>.
                    其他的修饰符还有 <code>.stop</code> <code>.prevent</code> <code>.capture</code> <code>.self</code> <code>.{keyCode | keyAlias}</code> <code>.native</code>
                </li>
            </ol>
            <h6>简捷表达式</h6>
            <code>v-bind</code> 和 <code>v-on</code> 都有简洁表达式:<br>
            <code>&lt;a v-bind:href="url"&gt;&lt;/a&gt;</code> => <code>&lt;a :href="url"&gt;&lt;/a&gt;</code><br>
            <code>&lt;a v-on:click="doSomething"&gt;&lt;/a&gt;</code> => <code>&lt;a @:click="doSomething"&gt;&lt;/a&gt;</code>
        </div>
        <script id="template" type="text/template">
            <p style="color: #888;">这是一段 <code>HTML</code> 内容</p>
        </script>
        <script type="text/javascript" src="syntax.js"></script>
    </body>
</html>